<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />


    <style type="text/css">
        html {
            background: #f2f2f2;
        }
    </style>
</head>

<body>
    <div id='app'>
        <section class="">
            <div class="red-bg">
                <img src="../image/index/red-bg.png" alt="">
            </div>
            <div class="address-shop">
                <div class="address" tapmode @click='toChangeShop'>
                    <img class='address-icon' src="../image/address/address-icon.png" alt="">
                    <div class="address-text">{{addressName}}</div>
                    <img class='white-right-img' src="../image/address/white-right-img.png" alt="">
                </div>
                <div class="shop-info text-color-9" @click='toChangeShop'>
                    <img class='logo-img' src="../image/index/logo1.png" alt="" @click='toAapplySupplier'>
                    <div class="shop-name font-16 font-semibold text-color-3">
                        {{shop.store_name}}
                    </div>
                    <div class="font-14 shop-address">{{shop.store_name}}</div>
                    <div class="shop-lables font-12">
                        <div>粉丝<span class="text-color-3">{{shop.fans}}</span></div>
                        <div>购买指数<span class="text-color-3">{{shop.buyExponent}}</span></div>
                        <div>距您<span class="text-color-3">{{distance}}</span></div>
                    </div>
                    <div class="coupons" tapmode @click='toCouponsModal'>
                        <div class="coupons-item">
                            <img class='hongbao-img' src="../image/index/hongbao.png" alt="">
                            <div class="coupons-text">
                                <div class="font-8 flex-center" style="width:2.65rem">
                                    ¥<span class="font-14">7</span>
                                </div>
                                <div class="font-9 flex-center" style='width: 1.35rem'>领取</div>
                            </div>
                        </div>
                        <div class="coupons-item">
                            <img class='hongbao-img' src="../image/index/hongbao.png" alt="">
                            <div class="coupons-text">
                                <div class="font-8 flex-center" style="width:2.65rem">
                                    ¥<span class="font-14">7</span>
                                </div>
                                <div class="font-9 flex-center" style='width: 1.35rem'>领取</div>
                            </div>
                        </div>
                        <div class="coupons-item">
                            <img class='hongbao-img' src="../image/index/hongbao.png" alt="">
                            <div class="coupons-text">
                                <div class="font-8 flex-center" style="width:2.65rem">
                                    ¥<span class="font-14">7</span>
                                </div>
                                <div class="font-9 flex-center" style='width: 1.35rem'>领取</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="aui-slide">
                    <div class="aui-slide-wrap">
                        <div class="aui-slide-node" v-for='(item,index) in banners'>
                            <img :src="item.imageUrl" />
                        </div>
                    </div>
                    <div class="aui-slide-page-wrap">
                        <!--分页容器-->
                    </div>
                </div>
            </div>
        </section>
        <section style="margin-top:13.95rem;margin-bottom:3.1rem;background-color#f2f2f2">
            <div class='goods-item' v-for='item in goodsItems'>
                <div class="goods-img" @click="toGoodsDetail()">
                    <img src="../image/demo/b3.jpg" />
                </div>
                <div class="goods-info">
                    <div class="flex-center-between">
                        <div class="">
                            <div class="goods-name font-16 font-semibold">
                                {{item.name}}
                            </div>
                            <div class='goods-lable red-text' v-for='item in lables'>{{item}}</div>
                        </div>
                        <div style="text-align:center">
                            <div class="focus-num red-text font-18">
                                {{item.buyd}}
                            </div>
                            <div class="focus-text font-12 text-color-9">
                                关注人数
                            </div>
                        </div>
                    </div>
                    <div class="font-12 flex-center-between" style='margin: .4rem 0'>
                        <div class="text-color-6">
                            20:00前下单，预计07/18可自提
                        </div>
                        <div class="">
                            已售<span class="red-text">{{item.buyd}}</span>份/限量2000份
                        </div>
                    </div>
                    <div class="font-14 flex-justify-between">
                        <div class="flex-justify-between ">
                            <div class="red-text">
                                ￥<span class="font-24">{{item.minPrices}}</span>
                            </div>
                            <div class="text-color-9 line-though">
                                ￥<span>{{item.maxPrices}}</span>
                            </div>
                        </div>
                        <div class="num-chang flex-center-between">
                            <img src="../image/index/jian.png" alt="">
                            <span class="font-16" style="padding:0 .6rem">{{item.tobuyNum}}</span>
                            <img src="../image/index/jia.png">
                        </div>
                    </div>

                    <div class="buy-people  flex-justify-between" @click="toBuyRecored">
                        <div class="flex-align-center">
                            <div class="people-imgs">
                                <img class='avatrl' src="../image/gril.jpg">
                            </div>
                            <div class="font-12 text-color-9">等52人购买了此商品</div>
                        </div>
                        <img class='grey-right' src=" ../image/common/grey-right.png">
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="share flex-center" tapmode @click='showShareModal'>
                <img src="../image/common/share.svg" alt="">
                <div class="text-color-3 font-9">分享</div>
            </div>
        </section>

        <footer class="aui-bar aui-bar-tab ">
            <div class="aui-bar-tab-item aui-active">
                <img class='bottom-seeting-img' src="../image/main/main_home_checked.png " alt=" ">
                <div class="aui-bar-tab-label font-9 red-text ">首页</div>
            </div>
            <div class="aui-bar-tab-item" @click="toCart">
                <div class="aui-badge">99</div>
                <img class='bottom-seeting-img' src="../image/main/main_cart_unchecked.png " alt=" ">
                <div class="aui-bar-tab-label font-9 text-color-6">购物车</div>
            </div>
            <div class="aui-bar-tab-item " @click='toPerson'>
                <img class='bottom-seeting-img' src="../image/main/main_person_unchecked.png " alt=" ">
                <div class="aui-bar-tab-label font-9 text-color-6">我的</div>
            </div>
        </footer>
    </div>

</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/aui-slide.js "></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
    apiready = function() {
        // 轮播图
        var slide = new auiSlide({
            container: document.getElementById("aui-slide"),
            "height": 90,
            "speed": 300,
            "pageShow": true,
            "pageStyle": 'dot',
            "loop": true,
            'dotPosition': 'center'
        })

        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    addressName: '地址',
                    title: '万嘉便利店',
                    goodsItems: [{
                        name: '美国华盛顿车厘子 一口一个刚刚好',
                        focusNum: 100,
                        buyd: '1323',
                        minPrices: 10,
                        maxPrices: 15.0,
                        tobuyNum: 1
                    }, {
                        name: '快手海鲜大餐 简单料理就上桌',
                        focusNum: 122,
                        buyd: '2000',
                        minPrices: 124,
                        maxPrices: 200.0,
                        tobuyNum: 1
                    }],
                    lables: ['美国进口', '脆甜', '新鲜'],
                    banners: [],
                    shop: {},
                    lon: 0,
                    lat: 0,
                    distance:0
                }
            },
            // 页面元素加载完后开始执行
            mounted() {
                this.getAddress();
                this.getNearestStore();
                this.getBanner()
            },
            methods: {
                // 获取位置
                getAddress: function() {
                    var _this = this;
                    var bMap = api.require('bMap');
                    bMap.getLocation({
                        accuracy: '100m',
                        autoStop: true,
                        filter: 1
                    }, function(ret, err) {
                        if (ret.status) {
                            _this.lon = ret.lon;
                            _this.lat = ret.lat;
                            var map = api.require('bMap');
                            map.getNameFromCoords({
                                lon: ret.lon,
                                lat: ret.lat
                            }, function(ret, err) {
                                if (ret.status) {
                                    var ret = JSON.stringify(ret.address);
                                    // 正则去掉字符串前后的双引号
                                    var reg = new RegExp('"', "g");
                                    var newStr = ret.replace(reg, "");
                                    _this.addressName = newStr
                                }
                            });
                        } else {
                            alert(err.code);
                        }
                    });
                },
                // 获取首页最近店铺信息
                getNearestStore: function() {
                    var _this = this;
                    api.ajax({
                        url: 'https://hhppapi.hoshiibuy.com/store/getNearestStore',
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        data: {
                            body: {
                                latitude: this.lat,
                                longitude: this.lon,
                                pageNumber: 1,
                                pageSize: 1000,
                                platId: "3189609977215975481",
                                userId: "3585603075692293660"
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            var shop = ret.data;
                            _this.shop = shop;
                            _this.distance = _this.setMtoKm(shop.distance)
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    });

                },
                setMtoKm: function(m) {
                    if (m > 1000) {
                        return (m / 1000).toFixed(1) + "km";
                    }
                    return m.toFixed(1) + "m";
                },

                // 获取首页最近店铺的详细信息
                getStoreInfo: function() {
                    var _this = this;
                    api.ajax({
                        url: 'https://hhppapi.hoshiibuy.com/store/query/100',
                        method: 'get',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        data: {}
                    }, function(ret, err) {
                        alert(ret)
                        if (ret) {
                            var shop = ret.data;
                            _this.shop = shop;
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    });
                },
                // 获取首页banner
                getBanner: function() {
                    var _this = this;
                    api.ajax({
                        url: 'https://hhppapi.hoshiibuy.com/goods/getBanners',
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        data: {
                            body: {
                                companyId: "3171776001692663893",
                                platformId: "3189609977215975481",
                                storeId: "100"
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            var banner = ret.data;
                            _this.banners = banner;
                            console.log(_this.banner)
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    });
                },
                toCart: function() {
                    console.log('1111')
                    api.openFrame({
                        name: 'main-cart_win',
                        url: './main-cart_win.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: $api.winWidth,
                            h: $api.winHeight
                        },
                        pageParam: {
                            name: 'test'
                        },
                        bounces: true,
                        bgColor: 'rgba(0,0,0,0)',
                        vScrollBarEnabled: true,
                        hScrollBarEnabled: true
                    });
                },
                toGoodsDetail: function() {
                    api.openWin({
                        name: 'goods-detail_win',
                        url: './goods-detail_win.html',
                        pageParam: {
                            name: 'test'
                        }
                    });
                },
                toPerson: function() {
                  api.openFrame({
                      name: 'main-person_win',
                      url: './main-person_win.html',
                      rect: {
                          x: 0,
                          y: 0,
                          w: $api.winWidth,
                          h: $api.winHeight
                      },
                      pageParam: {
                          name: 'test'
                      },
                      bounces: true,
                      bgColor: 'rgba(0,0,0,0)',
                      vScrollBarEnabled: true,
                      hScrollBarEnabled: true
                  });
                },
                toBuyRecored: function() {
                    api.openWin({
                        name: 'buy-recored_win',
                        url: './buy-recored_win.html',
                        pageParam: {
                            name: 'test'
                        }
                    });
                },
                toChangeShop: function() {
                    api.openWin({
                        name: 'change-shop_win',
                        url: './change-shop_win.html',
                        pageParam: {
                            name: 'test'
                        }
                    });

                },
                toAapplySupplier: function() {
                    api.openWin({
                        name: 'apply-supplier_win',
                        url: './apply-supplier_win.html',
                        pageParam: {
                            name: 'test'
                        }
                    });

                },
                showShareModal: function() {
                    api.openFrame({
                        name: 'share-modal',
                        url: './modal/share-modal.html',
                        bounces: true,
                        rect: {
                            x: 0,
                            y: 0,
                            w: api.winWidth,
                            h: api.winHeight
                        },
                        pageParam: {
                            data: 'indexShare'
                        },
                        bgColor: 'rgba(0,0,0,0.6)',
                        bounces: false
                    })
                },
                toCouponsModal: function() {
                    api.openFrame({
                        name: 'coupons-modal',
                        url: './modal/coupons-modal.html',
                        bounces: true,
                        rect: {
                            x: 0,
                            y: 0,
                            w: api.winWidth,
                            h: api.winHeight
                        },
                        bgColor: 'rgba(0,0,0,0.6)',
                        bounces: false
                    })

                }
            },
        });



    }
</script>

</html>
